<template>
	<view class="list-box">
		<view class="head-box">
			<!-- 标题栏 -->
			<shopro-navbar>
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content">
					<u-search placeholder="输入关键字搜索" @change="onSearch" @search="onSearch" @clear="clearSearch" v-model="searchVal"
					 :showAction="false" height="60"></u-search>
				</view>
			</shopro-navbar>
			<view class="filter-box">
				<scroll-view class="navbar" scroll-x>
					<view class="nav-item u-flex-col" @tap="tabClick(item.id)" v-for="(item, itemIndex) in categories" :key="item.id">
						<view class="title-box u-flex" :class="{ current: filterIndex === item.id }"><text class="filter-title">{{ item.name }}</text></view>
						<view class="line" :class="{ 'line-active': filterIndex === item.id }"></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<swiper class="swiper" :indicator-dots="indicatorDots" indicator-color="#ffffff" indicator-active-color="#A67016"
		 :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, itemIndex) in banners" :key="item.id">
				<view class="swiper-item">
					<image :src="baseUrl + item.image"></image>
				</view>
			</swiper-item>
			<!-- <swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item> -->
		</swiper>

		<view class="article_list">
			<view class="article_item" v-for="item in atticles" @tap.stop="jump('/pages/hospital/article-detial', { id: item.id })">
				<view class="article_left">
					<image :src="baseUrl + item.image" mode="aspectFill" class=""></image>
				</view>
				<view class="article_right">
					<view class="article_title">
						{{ item.title }}
					</view>
					<view class="article_bottom">
						<view>
							<text class="mr">{{ item.type_name }}</text>
							<text>{{ item.date }}</text>
						</view>
						<view>
							<text class="mr">阅读{{ item.read_num }}</text>
							<text>赞{{ item.click }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0, //系统高度
				searchVal: "",
				filterIndex: 0,
				priceOrder: 0, //价格

				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				categories: [],
				atticles: [],
				banners: [],
				pageindex: 0,
				isOver: false,
				baseUrl: this.$baseUrl, //后台域名地址
			};
		},
		onLoad() {
			this.handleGetCategoryList();
			this.handleGetBannerList();
		},
		onReachBottom() {
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			if (this.atticles.length < this.pageindex * 10) {
				this.isOver = true;
			}
			this.pageindex++; //页数加一
			this.handleGetArticleList(this.filterIndex, this.searchVal);
		},
		created() {
			this.getSysteminfo();
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
						console.log("this.systemBarHeight", this.systemBarHeight, res.statusBarHeight)
					}
				});
			},
			onSearch() {
				console.log(this.searchVal);
				this.atticles = [];
				this.handleGetArticleList(this.filterIndex, this.searchVal);
			},

			// 清除搜索框
			clearSearch() {
				this.searchVal = "";
				this.clear();
			},
			//筛选
			tabClick(index) {
				this.filterIndex = index;
				index === 0 ? (this.showSel = !this.showSel) : (this.showSel = false);
				index === 2 ?
					(this.priceOrder = this.priceOrder === 1 ? 2 : 1) :
					(this.priceOrder = 0);
				this.atticles = [];
				this.handleGetArticleList(index, "");

				this.$emit("change", this.filterData);
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas,
				});
			},
			// 获取医学科普分类
			handleGetCategoryList() {
				let that = this;
				that
					.$https("doctindex.articleTypies", {
						id: 14,
					})
					.then((res) => {
						if (res.code === 1) {
							that.categories = res.data || [];
							if (res.data.length > 0) {
								that.tabClick(res.data[0]["id"]);
							}
						}
					});
			},
			// 获取医学科普分类
			handleGetArticleList(id, key) {
				let that = this;
				if (that.isOver) {
					return;
				}
				that
					.$https("doctindex.articles", {
						category_id: id,
						keywork: key,
						page: that.pageindex,
					},'','',{'content-type':'application/x-www-form-urlencoded'},)
					.then((res) => {
						if (res.code === 1) {
							if(res.data.length>0){
								that.atticles = that.atticles.concat(res.data)
								// that.atticles = res.data || [];
								that.atticles.forEach((item) => {
									item.date = that.getYMDHMS(item.createtime * 1000);
								});
							}else{
								uni.showToast({
								  title: '暂无数据~',
								  duration: 2000,
								  icon: "none",
								  position: "bottom",
								});
							}
						}
					});
			},

			handleGetBannerList() {
				let that = this;
				that.$https("doctindex.banners", {}).then((res) => {
					if (res.code === 1) {
						that.banners = res.data || [];
					}
				});
			},
			getYMDHMS(timestamp) {
				let time = new Date(timestamp);
				let year = time.getFullYear();
				const month = (time.getMonth() + 1).toString().padStart(2, "0");
				const date = time.getDate().toString().padStart(2, "0");
				return year + "-" + month + "-" + date;
			},
		},
	};
</script>

<style lang="scss">
	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 999;
		background: #fff;
	}

	.filter-box {
		width: 750rpx;
		z-index: 1;
	}

	.navbar {
		display: flex;
		width: 100%;
		height: 95rpx;
		background: #fff;
		border-bottom: 1upx solid #e6e6e6;
		position: relative;
		z-index: 999;
		white-space: nowrap;
		flex-direction: row;
		
		.nav-item {
			flex: 1;
			display:inline-block;
			padding: 14rpx 40rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			height: 100%;
			font-size: 30rpx;
			position: relative;

			.current .filter-title {
				color: #dfb982;
			}

			.line {
				width: 100%;
				height: 4rpx;
				background: transparent;
				position: absolute;
				bottom: 0;
				z-index: 2;
				left: 0;
			}

			.line-active {
				background: #dfb982;
			}

			.p-box {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.swiper {
		.swiper-item {
			height: 100%;
		}

		.uni-bg-red {
			background: red;
		}

		.uni-bg-green {
			background: green;
		}

		.uni-bg-blue {
			background: blue;
		}
	}

	.article_list {
		background: #ffffff;

		.article_item {
			display: flex;
			padding: 30rpx;
			border-bottom: 2rpx solid #eeeeee;

			.article_left {
				width: 170rpx;
				height: 140rpx;
				border-radius: 20rpx;
				overflow: hidden;
				img{
					width: 100%;
					height: 100%;
				}
			}

			.article_right {
				display: flex;
				width: 100%;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 20rpx;

				.article_title {
					font-size: 28rpx;
					color: #000000;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.article_bottom {
					display: flex;
					justify-content: space-between;
					color: #aaaaaa;
					font-size: 24rpx;

					.mr {
						margin-right: 30rpx;
					}
				}
			}
		}
	}
</style>
